import React, { Component } from 'react'
import './translation.css';

class Translation extends Component {


    constructor(props){
        super(props);
        
        this.state ={
            'show':'block',
            'arrow':'icon iconfont icon-shouqi',
            'initStyle' : this.getInitStyleList(),
        }

    }

    getInitStyleList(){
        let initList = {};
        let quesitonData = this.props.data.bind_question;

        quesitonData.map((value, index)=>{
            initList[value.id] = ''
        });

        return initList;
    }

    getLeft(){

        if(this.props.switch === 0){
            return 0+'px';
        }

        if(this.props.switch === 1){
            return (-this.props.width)+'px';
        }

    }

    controlDisplay(e){
        let state = this.state.show;

        if(state === 'block'){

            this.setState({
                'show':'none',
                'arrow':'icon iconfont icon-zhankai'
            });

            return;

        }


        this.setState({
            'show':'block',
            'arrow':'icon iconfont icon-shouqi'
        });


    }

    clickHander(e){
        return;
    }


    render() {

        let left = this.getLeft();

        // let bindQuetion = this.props.data.bind_question;

        console.log(this.props);

        return (
            <div style={{height:this.props.height}} className="question-view">
                <ul className="question-card-box" style={{width:this.props.width*2, left:left}}>
                <li className="question-card" style={{width:this.props.width}}>
                    <div className="quesiton-wrapper">

                        <div style={{'display':this.state.show}} onClick={(e)=>this.clickHander(e)} className="t_setcion_explain" dangerouslySetInnerHTML={{ __html: this.props.data.section_explain }}></div>
                    
                        <div style={{'display':this.state.show}} onClick={(e)=>this.clickHander(e)} className="explain" dangerouslySetInnerHTML={{ __html: this.props.data.explain }}></div>

                        <div className="display-button">
                                <i onClick={(e)=>this.controlDisplay(e)} className={this.state.arrow}></i>
                        </div>

                        <div onClick={(e)=>this.clickHander(e)} className="t_common_question" dangerouslySetInnerHTML={{__html: this.props.data.common_question}}></div>

                    </div> 
                </li>

                <li className="question-card" style={{width:this.props.width}}>
                    <div onClick={(e)=>this.props.mark(e)} className="quesiton-wrapper-2 t_prompt">
                    本题为自主判断题，不提供评分功能！可交卷自行查看解析。     
                    </div>
                </li>

            </ul> 
            </div>
        );
    }
}

export default Translation;